<template>
	<view class="content">
		<view class="body">
			<scroll-view class="select-facility-view" scroll-y="true"
				:style="{height:setcollapseheight() + 'px'}">
				<!-- 轮播图 -->
				<view class="banner">
					<swiper circular indicator-dots :autoplay="true">
						<swiper-item @click="toProDetail(item)" v-for="item,i in swipers" :key="i">
							<image :src="item.slideshowImgUrl"></image>
						</swiper-item>
					</swiper>
				</view>

				<view class="select-system">
					<view class="line" v-for="Newmenu,index in NewmenuList" :key="index">
						<view class="image-box" v-for="item,i in Newmenu" :key="i" @click="tomenugo(item)">
							<image class="image-pic" :src="item.menuIcon" mode="heightFix"></image>
							<text>{{item.menuName}}</text>
						</view>
					</view>
				</view>
				<!-- 科普文章 -->
				<view class="pro-list">
					<view class="pro-title">
						<view class="title">科普文章</view>
						<view class="more" @click="toTech">
							更多
							<uni-icons type="arrowright" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="selected-pro">
						<view class="selected-card article" v-for="item,index in articleList" :key="index" @click="loadArticleDetail(item)">
							<view class="tip">
								<view class="txt">科普</view>
							</view>
							<view class="left-page">
								<view class="title">{{ item.title }}</view>
								<view class="content">
									<view class="text">阅读量：{{ item.watchNum }}</view>
								</view>
							</view>
							<view class="right-page">
								<image class="pro-img" :src="item.imgList[0]" mode="scaleToFill"></image>
							</view>
						</view>

						<view v-if="articleList.length == 0" class="facility-view-nodata">
							<image class="facility-view-blankimg" mode="widthFix" src="@/static/blank.png"></image>
							<view class="facility-view-nodata-line">
								暂无数据
							</view>
						</view>
					</view>
				</view>
				<!-- 政策法规 -->
				<view class="pro-list">
					<view class="pro-title">
						<view class="title" style=" border-bottom-color: #2265FB;">政策法规</view>
						<view class="more blue" @click="toPolicies">
							更多
							<uni-icons type="arrowright" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="selected-pro">
						<view class="selected-card regulation" v-for="item,index in regulationList" :key="index" @click="loadPoliciesDetail(item.policyId)">
							<view class="regulationBox">
								<view class="title">{{ item.title }}</view>
								<view class="content">
									<view class="text">发布单位：{{ item.department }}</view>
									<view class="text">发布日期：{{ item.timestamp }}</view>
								</view>
							</view>
						</view>

						<view v-if="regulationList.length == 0" class="facility-view-nodata">
							<image class="facility-view-blankimg" mode="widthFix" src="@/static/blank.png"></image>
							<view class="facility-view-nodata-line">
								暂无数据
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<view class="gov-box">
				<view class="tip-text">请登录政务服务网，</view>
				<view class="tip-text">搜索种粮补贴，查看相应补贴政策。</view>
				<view class="tip">
					<image class="tip-image" src="@/static/home/tip-bg.png" mode="widthFix"></image>
				</view>
				<view class="btn" @click="toGov">
					去政务服务网
				</view>
			</view>
		</uni-popup>
		<!-- 底部导航栏 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<bottomBar></bottomBar>
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	import bottomBar from "@/components/socialized-bottomtabar/home-bottomtabar"
	import UserApi from '@/api/socialized-servce/login/index.js'
	import homeApi from '@/api/home/index.js'
	import agriculturalApi from '@/api/socialized-servce/agricultural-information/index.js'
	import techArticleApi from '@/api/socialized-servce/breed-aquatics/tech-article/index.js'
	import policiesApi from '@/api/socialized-servce/policies-regulation/index.js'
	export default {
		components: {
			bottomBar,
		},
		data() {
			return {
				userTypeNameList: [],
				// 轮播图
				swipers: [],
				NewmenuList: [],
				menuList: [
					[
						{
							menuName: '农情监测',
							menuIcon: require('@/static/home/icon1.svg'),
							path: '/subPage1/socialized-service/agricultural-information/index'
						},
						{
							menuName: '行情咨讯',
							menuIcon: require('@/static/home/icon2.svg'),
							path: '/subPage1/socialized-service/market-information/industry-information/industry-information'
						},
						{
							menuName: '问诊解答',
							menuIcon: require('@/static/home/icon4.svg'),
							path: '/subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/diagnostic-list'
						},
						{
							menuName: '政策法规',
							menuIcon: require('@/static/home/icon5.svg'),
							path: '/subPage1/socialized-service/policies-regulation/policy-regulation/index'
						},
						// {
						// 	menuName: '专家问诊',
						// 	menuIcon: require('@/static/home/icon3.svg'),
						// 	path: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list',
						// 	// path: '/subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/diagnostic-list'
						// },
					],
					[
						{
							menuName: '技术科普',
							menuIcon: require('@/static/home/icon6.svg'),
							path: '/subPage1/socialized-service/breed-aquatics/online-class/online-class'
						},
						{
							menuName: '保险金融',
							menuIcon: require('@/static/home/icon7.svg'),
							path: '/subPage1/socialized-service/financial-insurance/home/home'
						},
						{
							menuName: '办理补贴',
							menuIcon: require('@/static/home/gov.svg'),
							toUrl: 'https://www.zjzwfw.gov.cn/zjservice-fe/#/home',
						},
						{
							menuName: '农事服务',
							menuIcon: require('@/static/home/icon7.svg'),
							path: '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify'
						},
					]
				],
				// 科普文章
				articleList: [],
				// 政策法规
				regulationList: [],
				serviceProviderNo: '',
				isMachinery: false,
				isAnchor: false,
				isExpert: false,
				disableMsg: false
			}
		},
		onShow() {
			uni.hideTabBar()
		},
		created() {
			this.serviceProviderNo = uni.getStorageSync('serviceProviderNo')
		},
		mounted() {
			this.getSlideList()
			this.getArticleList()
			this.loadPolicies()
			this.getRoles()
			this.getDisableMsg()
		},
		methods: {
			// 判断当前用户是否被禁言
			async getDisableMsg() {
				let params = {
					publisherId: uni.getStorageSync('userId')
				}
				let res = await UserApi.queryDisableMsg(params)
				if (res.code == 200) {
					if(res.data.length > 0) {
						this.disableMsg = res.data[0].disableSendMsgFlag
					}
					uni.setStorageSync('disableSendMsgFlag',this.disableMsg)
				}
			},
			getRoles() {
				let serviceProviderNo = uni.getStorageSync('serviceProviderNo')
				this.isMachinery = uni.getStorageSync('isMachinery').includes(serviceProviderNo)
				this.isAnchor = uni.getStorageSync('isAnchor').includes(serviceProviderNo)
				this.isExpert = uni.getStorageSync('isExpert').includes(serviceProviderNo)
				uni.setStorageSync('isExpertFlag',this.isExpert)
				if(this.isMachinery) {
					this.userTypeNameList.push('农机手')
				}
				if(this.isExpert) {
					this.userTypeNameList.push('专家')
				}
				if(this.isAnchor) {
					this.userTypeNameList.push('主播')
				}
				uni.setStorageSync('userTypeNameList',JSON.stringify(this.userTypeNameList))
				this.NewmenuList = this.menuList
				if (!this.isExpert) {
					this.NewmenuList = [
						[{
								menuName: '农情监测',
								menuIcon: require('@/static/home/icon1.svg'),
								path: '/subPage1/socialized-service/agricultural-information/index'
							},
							{
								menuName: '行情咨讯',
								menuIcon: require('@/static/home/icon2.svg'),
								path: '/subPage1/socialized-service/market-information/industry-information/industry-information'
							},
							{
								menuName: '专家问诊',
								menuIcon: require('@/static/home/icon3.svg'),
								path: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list',
								// path: '/subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/diagnostic-list'
							},
							{
								menuName: '政策法规',
								menuIcon: require('@/static/home/icon5.svg'),
								path: '/subPage1/socialized-service/policies-regulation/policy-regulation/index'
							},
						],
						[
							{
								menuName: '技术科普',
								menuIcon: require('@/static/home/icon6.svg'),
								path: '/subPage1/socialized-service/breed-aquatics/online-class/online-class'
							},
							{
								menuName: '保险金融',
								menuIcon: require('@/static/home/icon7.svg'),
								path: '/subPage1/socialized-service/financial-insurance/home/home'
							},
							{
								menuName: '办理补贴',
								menuIcon: require('@/static/home/gov.svg'),
								toUrl: 'https://www.zjzwfw.gov.cn/zjservice-fe/#/home',
							},
							{
								menuName: '农事服务',
								menuIcon: require('@/static/home/icon1.svg'),
								path: '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify'
							},
						]
					]
				} else if (this.isExpert) {
					this.NewmenuList = [
						[{
								menuName: '农情监测',
								menuIcon: require('@/static/home/icon8.svg'),
								path: '/subPage1/socialized-service/agricultural-information/index'
							},
							{
								menuName: '行情咨讯',
								menuIcon: require('@/static/home/icon2.svg'),
								path: '/subPage1/socialized-service/market-information/industry-information/industry-information'
							},
							{
								menuName: '问诊解答',
								menuIcon: require('@/static/home/icon4.svg'),
								path: '/subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/diagnostic-list'
							},
							{
								menuName: '政策法规',
								menuIcon: require('@/static/home/icon5.svg'),
								path: '/subPage1/socialized-service/policies-regulation/policy-regulation/index'
							},
						],
						[
							{
								menuName: '技术科普',
								menuIcon: require('@/static/home/icon6.svg'),
								path: '/subPage1/socialized-service/breed-aquatics/online-class/online-class'
							},
							{
								menuName: '保险金融',
								menuIcon: require('@/static/home/icon7.svg'),
								path: '/subPage1/socialized-service/financial-insurance/home/home'
							},
							{
								menuName: '办理补贴',
								menuIcon: require('@/static/home/gov.svg'),
								toUrl: 'https://www.zjzwfw.gov.cn/zjservice-fe/#/home',
							},
							{
								menuName: '农事服务',
								menuIcon: require('@/static/home/icon1.svg'),
								path: '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify'
							},
						]
					]
				}
				
				if (uni.getStorageSync('username-sa') == "小明Test") {
					this.NewmenuList = [
						[{
								menuName: '农情信息',
								menuIcon: require('@/static/home/icon8.svg'),
								path: '/subPage1/socialized-service/agricultural-information/index'
							},
							{
								menuName: '行情咨讯',
								menuIcon: require('@/static/home/icon2.svg'),
								path: '/subPage1/socialized-service/market-information/industry-information/industry-information'
							},
							{
								menuName: '专家问诊',
								menuIcon: require('@/static/home/icon3.svg'),
								path: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list',
								// path: '/subPage1/socialized-service/specialist-consultation/expert-module/diagnostic-list/diagnostic-list'
							},
						],
						[{
								menuName: '政策法规',
								menuIcon: require('@/static/home/icon5.svg'),
								path: '/subPage1/socialized-service/policies-regulation/policy-regulation/index'
							},
							{
								menuName: '技术科普',
								menuIcon: require('@/static/home/icon6.svg'),
								path: '/subPage1/socialized-service/breed-aquatics/online-class/online-class'
							},
							{
								menuName: '农事服务',
								menuIcon: require('@/static/home/icon1.svg'),
								path: '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify'
							},
						]
					]
				}
			},
			// 获取轮播图数据
			getSlideList() {
				let {serviceProviderNo} = this
				homeApi.queryByCondition({ serviceProviderNo }).then(res => {
					this.swipers = res.data
				})
			},
			// 跳转到详情
			toProDetail(row) {
				let url = '',
					param = ''
				if (row.modelName === '行情咨讯') {
					url =
						'/subPage1/socialized-service/market-information/industry-information/article-detail/article-detail'
					param = {
						id: row.productId,
						str: 'home'
					}
				} else if (row.modelName === '养殖科普') {
					url = '/subPage1/socialized-service/breed-aquatics/tech-article/article-detail/index'
					param = {
						id: row.productId
					}
				} else if (row.modelName === '政策法规') {
					url = '/subPage1/socialized-service/policies-regulation/policy-regulation/detail/index'
					param = {
						id: row.productId
					}
				} else if (row.modelName === '专家问诊') {
					if (!this.isExpert) {
						url =
							'/subPage1/socialized-service/specialist-consultation/user-module/my-interrogation/interrogation-details/interrogation-details'
						param = {
							id: row.productId,
							type: 'user1'
						}
					} else {
						url =
							'/subPage1/socialized-service/specialist-consultation/expert-module/my-diagnosis/diagnosis-details/diagnosis-details'
						param = {
							id: row.productId,
							type: 'expert1'
						}
					}
				} else if (row.modelName === '金融保险') {
					url = '/subPage1/socialized-service/financial-insurance/product/product-detail/index'
					param = {
						productId: row.productId,
						productUserId: row.productUserId
					}
				}
				this.$togo(url, param)
			},
			// 获取科普文章数据
			getArticleList() {
				let {serviceProviderNo} = this
				techArticleApi.queryPageByConditionArticle({
					page: 1,
					size: 3,
					condition: {
						serviceProviderNo
					}
				}).then(res => {
					let list = res.data.content
					list.map(el => {
						el.contentNoImg = el.content?.replace(/<.*?>/ig, "")
						let imgReg = /<img.*?(?:>|\/>)/gi
						let arr = el.content?.match(imgReg)
						// let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
						let imgList = arr && arr.length ? arr.map(el => {
							// return el.match(srcReg)
							return el.substring(10, el.length-2)
						}) : []
						el.imgList = imgList
					})
					this.articleList = list
				})
			},
			// 文章详情
			loadArticleDetail(row) {
				row.watchNum++
				this.$togo('/subPage1/socialized-service/breed-aquatics/tech-article/article-detail/index', {
					id: row.articleId
				})
			},
			toTech() {
				const url = '/subPage1/socialized-service/breed-aquatics/tech-article/tech-article'
				this.$togo(url)
			},
			// 政策法规
			loadPolicies() {
				let {serviceProviderNo} = this
				policiesApi.queryPageByConditionArticle({
					page: 1,
					size: 3,
					condition: {
						serviceProviderNo
					}
				}).then(res => {
					let list = res.data.content
					this.regulationList = list
				})
			},
			// 政策法规详情
			loadPoliciesDetail(id) {
				this.$togo('/subPage1/socialized-service/policies-regulation/policy-regulation/detail/index', {
					id
				})
			},
			toPolicies() {
				const url = '/subPage1/socialized-service/policies-regulation/policy-regulation/index'
				this.$togo(url)
			},
			toGov() {
				plus.runtime.openURL(this.toUrl)
				this.$refs.inputDialog.close();
			},
			// 点击菜单
			tomenugo(e) {
				if (e.toUrl) {
					this.toUrl = e.toUrl
					this.$refs.inputDialog.open();
					return
				}
				// console.log(this.isMachinery,this.isAnchor); return
				// 用户
				if(this.isMachinery || this.isAnchor) {//农机手-主播
					// if(e === '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify') {
					// 	let url = '/subPage1/socialized-service/farm-service/mechanist/my-order/my-order'
					// 	this.$togo(url)
					// } else {
						this.$togo(e.path)
					// }
				} else {
					this.$togo(e.path)
				}
				// this.$togo(e)
			},
			//  设置可选择设施高度
			setcollapseheight() {
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(160)
				winHeight = parseInt(winHeight) - oldHeight
				// // #ifdef MP
				// winHeight = winHeight + 40
				// // #endif
				return winHeight
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.select-system {
			// margin: -30rpx auto 0;
			width: 684rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 50rpx;
			overflow: hidden;
			opacity: 1;
			// display: flex;
			// flex-flow: row wrap;
			z-index: 3;
			position: absolute;
			left: 36rpx;
			top: 350rpx;

			.line {
				display: flex;

				&:first-child .image-box {
					margin-bottom: 6rpx;

					&:first-child {
						background-image: linear-gradient(135deg, #ff8c8d, #ff740a);
					}
					&:nth-child(2) {
						background-image: linear-gradient(135deg, #87adfb, #2065fe);
					}
					&:nth-child(3) {
						background-image: linear-gradient(135deg, #03ffc0, #008fa3);
					}
					&:nth-child(4) {
						background-image: linear-gradient(135deg, #b5d7ff, #0752fd);
					}
				}

				&:nth-child(2) .image-box {

					&:first-child {
						background-image: linear-gradient(135deg, #a09cff, #0075d8);
					}
					&:nth-child(2) {
						background-image: linear-gradient(135deg, #71bcff, #b453e3);
					}
					&:nth-child(3) {
						background-image: linear-gradient(135deg, #fdc74f, #ff7b7d);
					}
					&:nth-child(4) {
						background-image: linear-gradient(135deg, #b5d7ff, #0752fd);
					}
				}

				.image-box {
					flex: 1;
					text-align: center;
					padding: 30rpx 20rpx;
					margin-right: 6rpx;

					&:last-child {
						margin-right: 0;
					}

					.image-pic {
						display: block;
						margin: 0 auto;
						height: 60rpx !important;
						margin-bottom: 20rpx;
						// border-radius: 50%;

					}

					text {
						margin: 10rpx auto;
						height: 28rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #fff;
						line-height: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						text-align: center;
					}
				}
			}
		}

		.tabbar {
			width: 100%;
			height: 516rpx;
			// background: linear-gradient(315deg, #0480FB 0%, #57DED9 100%);
			color: #393939;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			position: relative;

			.title {
				margin-top: 90rpx;
				height: 32rpx;
				line-height: 32rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.tabbar-bgc {
				width: 750rpx;
				height: 272rpx;
				background: linear-gradient(360deg, #F5F6FA 0%, rgba(245, 246, 250, 0) 100%);
				position: absolute;
				bottom: 0rpx;
			}
		}

		.banner {
			margin-bottom: 310rpx;
			display: flex;
			justify-content: center;
			align-self: center;
			z-index: 2;

			swiper {
				z-index: 2;
				width: 100%;
				height: 396rpx;
				overflow: hidden;

				image {
					z-index: 2;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
				}
			}

			::v-deep .uni-swiper-dots {
				bottom: 70rpx !important;
			}

		}

		.pro-list {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.pro-title {
				width: 100%;
				height: 88rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #000;
				line-height: 88rpx;
				position: relative;
				.title {
					padding: 0 10rpx;
					display: inline-block;
					height: 46rpx;
					line-height: 46rpx;
					border-bottom: 1px solid #f6d379;

				}
				
				.more {
					position: absolute;
					right: -60rpx;
					top: 22rpx;
					background: linear-gradient(to right, #f7b228, #ff8b45);
					color: #fff;
					height: 46rpx;
					line-height: 46rpx;
					padding: 0 46rpx 0 30rpx;
					border-radius: 24rpx;

					&.blue {
						background: linear-gradient(to right, #8aacf1, #2065ff);
					}
				}
			}

			.selected-pro {

				.selected-card {
					background-color: #fff;
					border-radius: 20rpx;
					overflow: hidden;
					padding: 20rpx 30rpx;
					position: relative;
					// border-top: 4rpx solid #8dc5ff;
					display: flex;
					margin-bottom: 30rpx;

					.right-page {
						width: 150rpx;
						height: 150rpx;
						margin-left: 20rpx;

						.pro-img {
							width: 100%;
							height: 100%;
						}
					}

					.left-page {
						width: calc(100% - 170rpx);

						.title {
							font-size: 36rpx;
							margin-top: 20rpx;
							overflow: hidden;
							font-weight: bold;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.content {
							height: 40rpx;
							margin-top: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							.text {
								display: inline-block;
								font-size: 28rpx;

								&:first-child {
									margin-right: 20rpx;
								}
							}
						}
					}

					&.article {

						.tip {
							width: 0;
							height: 0;
							display: inline-block;
							position: absolute;
							left: 0;
							top: 0;
							border: 40rpx solid transparent;
							border-top: 40rpx solid #ffb600;
							border-left: 40rpx solid #ffb600;
							background-color: transparent;

							.txt {
								color: #fff;
								width: 52rpx;
								font-size: 24rpx;
								transform: rotate(-50deg);
								position: absolute;
								left: -34rpx;
								top: -30rpx;
							}
						}
					}

					&.regulation {
						display: block;
						padding-left: 0;

						.regulationBox {
							padding-left: 30rpx;
							border-left: 2px solid #6897ff;
						}

						.title {
							font-weight: bold;
							font-size: 16px;
						}

						.content {
							height: 40rpx;
							margin-top: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							position: relative;

							.text {
								display: inline-block;
								width: 55%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;

								&:last-child {
									width: 44%;
									position: absolute;
									right: 0;
									top: 0;
								}
							}
						}
					}
				}
			}
		}
	}
	.gov-box {
		width: 80%;
		height: 360rpx;
		background-color: #FFFFFF;
		box-shadow: 0 -3px 6px 1px #00000016;
		position: fixed;
		top: calc(45% - 180rpx);
		left: 10%;
		z-index: 999;
		padding-top: 80rpx;
		.tip-text {
			text-align: center;
			color: #001E60;
			font-size: 28rpx;
			line-height: 52rpx;
			z-index: 1;
			position: relative;
		}
		.tip {
			text-align: center;
			margin-top: -40rpx;
			.tip-image {
				width: 200rpx;
			}
		}
		.btn {
			margin: 30rpx auto 0;
			background: linear-gradient(to right, #2165FF, #88ACFF);
			box-shadow: 0 0 4px 1px #00000016;
			color: #fff;
			width: 210rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
		}
	}
</style>